<template>
    <u-table class="u-table">
        <z-paging ref="paging" v-model="list" @query="upCallback">
            <template #top>
                <view class="wrap">
                    <view class="overdue">
                        <view class="u-flex u-row-around">
                            <text class="left">逾期开始日期：</text>
                            <text class="right">{{ $u.$timeUtil.formatDate(info.overdueStartDate, 'yyyy-MM-dd') }}</text>
                        </view>
                        <view class="u-flex u-row-around">
                            <text class="left">滞纳金利率：</text>
                            <text class="right">{{ info.overdueRate }}% (按天)</text>
                        </view>
                        <view class="u-flex u-row-around">
                            <text class="left">滞纳金金额：</text>
                            <text class="right">¥{{ Number(info.lateFee).toFixed(2) }}</text>
                        </view>
                        <view class="u-flex u-row-around">
                            <text class="left">更新时间：</text>
                            <text class="right">{{ info.updateTime }}</text>
                        </view>
                    </view>
                    <view class="title">
                        <text class="local-yuqi"></text>
                        <text class="u-margin-left-20">逾期记录</text>
                    </view>
                </view>
                <u-tr>
                    <u-th class="u-th">逾期日期</u-th>
                    <u-th class="u-th">逾期本金</u-th>
                    <u-th class="u-th">逾期滞纳金金额(元)</u-th>
                    <u-th class="u-th">逾期滞纳金总金额(元)</u-th>
                </u-tr>
            </template>
            <!-- 逾期记录 -->
            <u-tr v-for="(item, index) in list" :key="index" class="items">
                <u-td>{{ $u.$timeUtil.formatDate(item.overdueDate, 'yy-MM-dd') }}</u-td>
                <u-td>{{ Number(item.overduePrincipal).toFixed(2) }}</u-td>
                <u-td>{{ Number(item.totalLateFee - item.lateFee).toFixed(2) }}</u-td>
                <u-td>{{ Number(item.totalLateFee).toFixed(2) }}</u-td>
            </u-tr>
        </z-paging>
    </u-table>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, ref } from 'vue'

const list = ref<Array<any>>([])

const id = ref('')
const $u = computed(() => {
    return uni.$u
})
const info = ref({
    id: undefined,
    overdueStartDate: '',
    overdueRate: '',
    lateFee: '',
    updateTime: ''
})

const pagingHeight = computed(() => {
    let sys = uni.getSystemInfoSync()
    return sys.screenHeight - (sys.statusBarHeight || 0) - 44 - 390 + 'px'
})
const paging = ref<any>(null)

const upCallback = (pageNo: number) => {
    let para = {
        current: pageNo,
        billId: id.value
    }
    uni.$u.$api.CreditApi.queryDelayRecords(para)
        .then((res: any) => {
            paging.value?.complete(res.records)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}

onLoad((option: any) => {
    id.value = option.id
})

onMounted(() => {
    uni.$u.$api.CreditApi.queryDelayMoney({ id: id.value }).then((res: any) => {
        info.value = res[0]
    })
})
</script>

<style scoped lang="scss">
.wrap {
    padding: 20rpx;
}
.title {
    padding: 20rpx;
    font-size: 26rpx;
    font-weight: 600;
    line-height: 60rpx;
    border-bottom: 1rpx solid #e5e5e5;
    background-color: $uni-bg-color;
    margin-top: 20rpx;
}
.u-table {
    border: none !important;

    .u-th {
        border: none !important;
    }
}
.items {
    font-size: 28rpx;
}
.overdue {
    position: relative;
    margin: 0 auto;
    background: url(@/static/images/bg-znj.png);
    background-size: 100% 360rpx;
    width: 100%;
    height: 360rpx;
    border-radius: 10rpx;
    padding: 50rpx;
    text-align: left;
    font-size: 26rpx;
    font-weight: 600;
    color: #333333;
    line-height: 60rpx;
    .left {
        width: 200rpx;
    }

    .right {
        width: 350rpx;
    }
}
</style>
